<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from "vue";


var m2R2Data = [
    { value: 335, legendname: '返校重听', name: "返校重听", itemStyle: { color: "#8d7fec" } },
    { value: 310, legendname: '种类以往未就业', name: "以往未就业", itemStyle: { color: "#5085f2" } },
    { value: 234, legendname: '返回未就业', name: "返回未就业", itemStyle: { color: "#e75fc3" } },
    { value: 154, legendname: '未就业', name: "未就业", itemStyle: { color: "#f87be2" } },
    { value: 335, legendname: '已就业', name: "已就业", itemStyle: { color: "#f2719a" } },
];


onMounted(() => {
    var myChart = echarts.init(document.getElementById('salary'));

    // 指定图表的配置项和数据
    var option = {
        title: [
            {
                textStyle: {
                    fontSize: 16,
                    color: "#fff"
                },
                left: "2%",
            },
           ],
        legend: {
            type: "scroll",
            orient: 'vertical',
            left: '70%',
            align: 'left',
            top: 'middle',
            textStyle: {
                color: '#fff'
            },
            height: 250
        },
        series: [
            {
                name: '标题',
                type: 'pie',
                center: ['35%', '50%'],
                radius: ['40%', '65%'],
                clockwise: false, //饼图的扇区是否是顺时针排布
                avoidLabelOverlap: false,
                label: {
                },
                labelLine: {
                    normal: {
                        length: 5,
                        length2: 3,
                        smooth: true,
                    }
                },
                data: m2R2Data
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
})
</script>

<template>
    <div class="left-Bottom">
        <div class="left-Bottom-img">
            <span style="padding: 10px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">毕业生工作状态</span>
        </div>
        <div class="left-Bottom-bottom">
            <div id="salary" style="width: 100%;height:100%;"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-Bottom {
    width: 28rem;
    height: 20rem;
    margin: 0 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/leftImg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 15rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

    }
}
</style>